<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: pink;
				/* 第二步:绑定动画 
				animation: 动画名称 时间 速度 次数;
				linear:匀速
				infinite:无限的*/
				animation: move 3s linear infinite;
			}
			/* 动画：
			 step1:创建关键帧
			 step2:绑定动画*/
			 /* 第一步：创建关键帧 
			 from:开始帧    to:结束帧*/
			 @keyframes move{
				/*  from{ 开始帧 */
				/* 0{
					
				
				 width: 500px;
				 background-color: pink;
				} */
				 0%,30%{ /* 持续保持某种状态 */
					 /* width: 200px;
					 background-color: coral; */
					 background: url(img/m1.jpg) no-repeat center/100% 100%;
				 }
				 40%,60%{
					 /* width: 600px;
					 background-color: greenyellow; */
					 background: url(img/m2.jpg) no-repeat center/100% 100%;
				 }
				 
				 
				 /* to{ 结束帧 */
				 70%,90%{
				 					 
				 
					 /* width: 900px;
					 background-color: aqua; */
					 background: url(img/m3.jpg) no-repeat center/100% 1005;
					 }
				 }
			 
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
